<template>
  <div class="padding flex direction-column height-100">
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
         v-loading="loading" :data="lists"
        height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white',
          textAlign: 'center'
        }"
        :cell-style="{
          textAlign: 'center'
        }"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column label="区域" prop="col1">
          <template #default="{ row }">
            <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis(row)">{{row.col1}}</el-link>
          </template>
        </el-table-column>
        <el-table-column v-for="column in columns" :key="column.label" v-bind="column">
          <template v-if="column.children">
            <el-table-column v-for="item in column.children" :key="item.label" v-bind="item"></el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    <el-pagination-->
<!--      class="pagination" layout="total,prev,pager,next"-->
<!--      hide-on-single-page background-->
<!--      :current-page.sync="pagination.pageNumber" :page-size="pagination.pageSize"-->
<!--      :total="pagination.total"-->
<!--    ></el-pagination>-->
  </div>
</template>

<script>
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'

export default {
  name: 'energy-efficiency-analysis-coal',
  mixins: [Navigate2enterpriseAnalysis],
  data () {
    return {
      loading: false,
      lists: [],
      pagination: {
        pageNumber: 1,
        pageSize: 12,
        total: 30
      },
      columns: [
        {
          label: '基准值2015年',
          prop: 'col2'
        },
        {
          label: '2021年',
          children: [
            {
              label: '基础值',
              prop: 'col3'
            },
            {
              label: '控制目标（万吨）',
              prop: 'col4'
            },
            {
              label: '达标率',
              prop: 'col5'
            },
            {
              label: '差值',
              prop: 'col6'
            }
          ]
        },
        {
          label: '2022年',
          children: [
            {
              label: '基础值',
              prop: 'col7'
            },
            {
              label: '控制目标（万吨）',
              prop: 'col8'
            },
            {
              label: '达标率',
              prop: 'col9'
            },
            {
              label: '差值',
              prop: 'col10'
            }
          ]
        },
        {
          label: '2023年',
          children: [
            {
              label: '基础值',
              prop: 'col11'
            },
            {
              label: '控制目标（万吨）',
              prop: 'col12'
            },
            {
              label: '达标率',
              prop: 'col13'
            },
            {
              label: '差值',
              prop: 'col14'
            }
          ]
        }
      ]
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    districts () {
      return this.$store.getters['user/districts']
    },
  },
  mounted () {
    this.query()
  },
  methods: {
    query () {
      this.loading = true
      // TODO
      const districts = this.districts
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.lists = districts.map((v, i) => ({
            id: v.code,
            col1: v.name,
            col2: '-',
            col3: '-',
            col4: '-',
            col5: '-',
            col6: '-',
            col7: '-',
            col8: '-',
            col9: '-',
            col10: '-',
            col11: '-',
            col12: '-',
            col13: '-',
            col14: '-',
          }))
          this.loading = false
        }, 400)
      })
    },
  },
}
</script>
